// 导入路径path模块
const path = require("path");
// 导入ESLint插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 导入HTML插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 导出 webpack的打包配置
module.exports = {
    // 入口
    entry: "./src/main.js",

    // 出口
    output: {
        // 绝对路径
        path: path.resolve(__dirname, "../build"),  // 打包文件所在的根目录
        // path: __dirname + "/build/js", 
        filename: "js/bundle.js", // 打包生成的js文件名(可以带目录)
        clean: true, // 打包时, 会先自动清空打包文件夹

        // 设置引入打包文件的基础路径，默认是相对路径
        publicPath: '/'
    },

    // 模式
    // mode: 'production',
    mode: 'development',

    // 加载器 loader
    module: {
        rules: [
            // 配置 css 文件处理
            {
                test: /\.css$/, // 处理css文件
                use: [
                    "style-loader", // 将 CSS 生成 style 标签插入 HTML 中
                    "css-loader"    // 将 CSS 转为 CommonJS 的模块
                ]
            },
            // 配置 less 文件处理
            {
                test: /\.less$/, // 处理less文件
                use: [
                    'style-loader', // 将 CSS 生成 style 标签插入 HTML 中
                    'css-loader',   // 将 CSS 转为 CommonJS 的模块
                    'less-loader'   // 将Less编译为CSS
                ]
            },
            //配置 babel 的 loader
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        //修改 presets 为下面的内容
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ],
                    }
                }
            },
            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb    默认8k
                    }
                },
                // 打包生成的文件
                generator: {
                    filename: 'images/[hash:8][ext]',
                },
            },
            // 配置 html 的 loader
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            // 打包字体图标
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                type: 'asset',
                // 解析器
                parser: {
                    // 指定进行base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    }
                },
                generator: {
                    filename: 'fonts/[hash:8][ext]',
                },
            },
        ]
    },

    // 配置进行ESlint检查的插件\
    plugins: [
        new ESLintPlugin(),
        // 2. 配置打包HTML的插件
        new HtmlWebpackPlugin({
            template: "./public/index.html",// 指定html模板文件。
            inject: "body",// 将打包生成的JS文件放置在body尾部
            hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
            minify: {
                removeAttributeQuotes: false,// 移除属性中的双引号
                removeComments: true,// 移除注释
                collapseWhitespace: true,// 去除空格与换行
            }
        })
    ],

    // 配置开发服务
    devServer:{
        port:3000,// 设置端口号
        open:true,// 自动在浏览器中打开页面
    },

    // 开启sourceMap调试
  	//devtool: 'source-map', // 生成单独的sourceMap文件 ==> 慢
	devtool: 'cheap-module-source-map', // 只生成内联的sourceMap ==> 快
    // 生产环境打包不用生成sourceMap， 只有开发环境需要
}

